<template>
  <el-drawer
    v-model="showDrawer"
    :title="$t(`${props.from === 'send' ? '发送成功' : '订单详情'}`)"
    size="35%"
    @close="emit('close')"
  >
    <el-card v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>{{ $t("基本信息") }}</span>
        </div>
      </template>
      <template v-for="(item, index) in coinDetailList">
        <div v-if="item.isShow" :key="index" class="detailItem">
          <span style="flex-shrink: 0">{{ item.name }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            <span v-if="item.isShowHref">
              <a
                :href="item.url"
                target="_blank"
                style="
                  border-bottom: 1px solid #409eff;
                  color: #409eff;
                  cursor: pointer;
                "
                >{{ item.value }}</a
              >
            </span>
            <span v-else>
              {{ item.value }}
            </span>
          </div>
        </div>
      </template>
    </el-card>
    <el-card
      v-show="coinData.is_review"
      style="margin-top: 1.25rem"
      v-loading="loading"
    >
      <template #header>
        <div class="card-header">
          <span>{{ $t("审核信息") }}</span>
        </div>
      </template>

      <div class="detailItem">
        <span style="flex-shrink: 0">{{ $t("审核状态") }}</span>
        <div style="max-width: 60%; word-break: break-all; text-align: right">
          {{ coinData.review_status }}
        </div>
      </div>
    </el-card>
  </el-drawer>
</template>
<script setup>
import { ref, reactive, watch, toRefs, computed } from "vue";
import { getWalletBillDetailNewApi } from "@/api/wallet/index";
import { useI18n } from "vue-i18n";
import { dayjs } from "element-plus";
import _ from "lodash";
const { t } = useI18n();

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  bill_no: {
    type: String,
    default: "",
  },
  from: {
    type: String,
    default: "records",
  },
});
const emit = defineEmits(["close"]);
const loading = ref(true);
const showDrawer = ref(false);
watch(
  () => props.show,
  (newVal) => {
    showDrawer.value = newVal;
  },
  { immediate: true }
);
const status = reactive({
  0: t("进行中"),
  1: t("成功"),
  2: t("失败"),
});
const coinData = reactive({});

const coinDetailList = computed(() => {
  return [
    { name: t("订单号"), value: coinData.bill_no, isShow: true },
    { name: t("订单状态"), value: status[coinData.status], isShow: true },
    { name: t("订单类型"), value: coinData.trade_type, isShow: true },
    { name: t("币种名称"), value: coinData.coin_name, isShow: true },
    // { name: t("主链名称"), value: coinData.chain_name },
    { name: t("数量"), value: coinData.amount, isShow: true },
    { name: t("手续费"), value: coinData.fee, isShow: true },
    { name: t("接收地址"), value: coinData.to_address || "--", isShow: true },
    {
      name: t("创建订单时间"),
      value: dayjs(coinData.create_time * 1000).format("YYYY-MM-DD HH:mm:ss"),
      isShow: true,
    },
    {
      name: t("完成订单时间"),
      value:
        dayjs(coinData.confirm_time * 1000).format("YYYY-MM-DD HH:mm:ss") ||
        "--",
      isShow: true,
    },
    {
      name: t("交易HASH"),
      value: coinData.tx_hash || "--",
      isShowHref: true,
      url: coinData.tx_url,
      isShow: coinData.tx_url ? true : false,
    },
  ];
});
// const reviewInfo = reactive({
//   is_review:coinData.
// })

const getWalletBillDetails = async () => {
  try {
    loading.value = true;
    const res = await getWalletBillDetailNewApi({
      bill_no: props.bill_no,
    });
    for (const item in res) {
      coinData[item] = res[item];
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};
getWalletBillDetails();
</script>
<style lang="scss">
.detailItem {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.625rem;
  font-size: 1rem;
}
</style>
